<template>
      <el-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        :auto-upload="false"
        :on-preview="handlePreview" 
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
        list-type="file">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
    </el-upload>
</template>

<script>
module.exports = {  
    data:function() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        formData: "",
      };
    },
        onSubmit:function () {
            let formData = new FormData();
            formData.append("file", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
        //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
            formData.append("title", this.title);
        },
      handleRemove: function(file, fileList) {
        console.log(file, fileList);
        },
      handlePreview:function(file) {
        console.log(file);
      },
      handleExcee:function(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove:function(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    
	}
// export default {
//     name:'uploadfile',
//     components:{
//         uploadfile
//     }
// }
</script>
<!-- 引入样式 -->
<style>

</style>